<template>
	<view class="w-full h-full">
		<view class="flex w-full h-full" style="color: #888;">
			<view style="width: 50%;" class="lz-left h-full flex justify-center">
				<view style="width: 450px;" class="mt-32">
					<view class="text-white text-4xl">{{$t('login.anxinjiaoyi')}}</view>
					<view class="text-xl mt-2">{{$t('login.dndzccy')}}</view>
					<view style="margin-top: 400px;" class="text-right text-white text-xl">
						{{$t('login.jrwmkqndjm')}}
					</view>
				</view>
			</view>
			<view style="width: 50%;" class="lz-right bg-white flex justify-center items-center">
				<view style="width: 500px;" class="flex flex-col gap-8">
					<view class="text-black text-4xl">{{$t('register.home')}}</view>
					<view>{{$t('login.youxiang')}}</view>
					<view>
						<el-input v-model="form.username" size="large" :placeholder="$t('login.qingshuryx')" style="height: 50px;"/>
					</view>
					<view>
						<el-input v-model="form.password" size="large" type="password" show-password :placeholder="$t('login.mima')" style="height: 50px;"/>
					</view>
					<view>
						<el-input v-model="form.password" size="large" type="password" show-password :placeholder="$t('register.querenmima')" style="height: 50px;"/>
					</view>
					<view>
						<el-input v-model="form.password" size="large" type="password" show-password :placeholder="$t('register.tikuanmima')" style="height: 50px;"/>
					</view>
					<view class="flex">
						<el-input v-model="form.password" size="large" type="password" show-password :placeholder="$t('register.tuxingyanzheng')" 
						style="height: 50px;"/>
						<image src="/static/images/wode/6.png" style="width: 200px;height: 50px;"></image>
					</view>
					<view>
						<el-input v-model="form.username" size="large" :placeholder="$t('register.tuijianren')" style="height: 50px;"/>
					</view>
					<view class="flex justify-between items-center">
						<el-checkbox v-model="remember" size="large">
							<view class="flex gap-1">
								<view class="text-black">{{$t('register.wotongyi')}}</view>
								<view>{{$t('register.tiaokanjixize')}}</view>
							</view>
						</el-checkbox>
					</view>
					<view class="w-full">
						<el-button type="primary" color="#27282a" round style="height: 50px;width: 100%;">{{$t('login.home')}}</el-button>
					</view>
					<view class="flex justify-center text-md">
						<view>{{$t('register.yjyygzh')}}</view>
						<navigator url="/pages/login/login">
							<view class="lz-hover cursor-pointer font-bold">{{$t('register.qianwangdenglu')}}</view>
						</navigator>
					</view>
				</view>
				
			</view>
		</view>
		
		<view class="center-bg w-full flex justify-center mt-2" style="background-color: #121212;">
			<footerPage></footerPage>
		</view>
	</view>
</template>

<script>
	import { useDark, useToggle } from '@vueuse/core'
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				remember:false,
				form: {
					username: '',
					password: '',
				},
				rules: {
					username: [{
						required: true,
						message: '必填项',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '必填项',
						trigger: 'blur'
					}],
				}
			}
		},
		computed: {
			...mapState({
				mode: state => state.app.mode
			})
		},
		mounted() {
			
			// 刷新图形
			// this.refreshCode()
		},
		methods: {
			...mapActions(['set_userToken', 'set_userInfo']),
			navigator(path) {
				uni.navigateTo({
					url: path,
				});
			},
			// 登录
			onSubmit() {
				let req = {
					...this.form
				}
				delete req.image
				uni.$http.post('/saasWapAuth/login', req).then(res => {
					if (res.code == 200 && res.data) {
						uni.showToast({
							title: '登录成功'
						});
						this.set_userToken(res.data.access_token)
						// 获取用户信息
						this.getUserInfo()
					} else {
						// 刷新图形
						this.refreshCode()
					}
				})
			},
			// 获取用户信息
			getUserInfo() {
				uni.$http.get('/saasWapAuth/getInfo', {}).then(res => {
					if (res.code == 200 && res.data) {
						this.set_userInfo(res.data)
						uni.navigateTo({
							url: '/pages/index/index',
						});
					}
				})
			},
			// 刷新图形
			refreshCode() {
				uni.$http.get('/auth/code', {}).then(res => {
					if (res.code == 200 && res.data) {
						this.form.image = 'data:image/jpeg;base64,' + res.data.img
						this.form.uuid = res.data.uuid
					}
				})

				// // 获取后台图形验证码
				// loginVerificationCodeLoginTenant({}).then(res => {
				// 	if(res.code==0){
				// 		this.code = res.data
				// 	}
				// })
			},
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .el-checkbox__label{
		color: #888;
	}
	::v-deep .el-input__wrapper{
		box-shadow: 0 0 0 1px #f0f0f0 inset;
		color: #000;
	}
	::v-deep .el-input__inner{
		color: #000;
	}
	.lz-hover:hover{
		color: #0f4df5;
	}
	.lz-right {
		animation: slideIn 1s ease-out forwards;
	}
	.lz-left {
		animation: slideIn2 1s ease-out forwards;
	}

	@keyframes slideIn {
		0% {
			transform: translateX(100%);
		}

		100% {
			transform: translateX(0);
		}
	}
	@keyframes slideIn2 {
		0% {
			transform: translateX(-100%);
		}
	
		100% {
			transform: translateX(0);
		}
	}
</style>